import { requestCategory1Selector,requestCategory2Selector,requestCategory3Selector } from "@/api/category";
import type { Category1SelectorList,Category2SelectorList,Category3SelectorList } from "@/api/category";
import {ref,watch} from "vue"
//数据1:一级列表
const category1 = ref<Category1SelectorList>([]);
//数据2:二级列表
const category2 = ref<Category2SelectorList>([]);
//数据3:三级列表
const category3 = ref<Category3SelectorList>([]);
//数据5:一级列表 选中商品id
const category1Id = ref("")
//数据5:一级列表 选中商品id
const category2Id = ref("")
//数据5:一级列表 选中商品id
const category3Id = ref("")



//请求1: 请求一级分类列表数据
const getCategory1SelectorList = async () => {
  const result = await requestCategory1Selector();
  console.log("请求1", result);
  category1.value = result;
};
//请求2:请求二级分类列表数据
const getCategory2SelectorList = async ()=>{
      /**
     * 清空分类2的列表和选择的内容
     * 清空分类3的列表和选择的内容
     */
      category2Id.value = category3Id.value = "";
      category2.value = [];
      category3.value = [];
      category2.value = await requestCategory2Selector(Number(category1Id.value))
}
//请求3:请求三级分类列表数据 
const getCategory3SelectorList = async ()=>{
  /**
 * 清空分类2的列表和选择的内容
 * 清空分类3的列表和选择的内容
 */
  category3Id.value = "";
  category3.value = [];
  category3.value = await requestCategory3Selector(Number(category2Id.value))
}

export default function useCategorySelector(){
    return {
        category1,
        category2,
        category3,
        category1Id,
        category2Id,
        category3Id,
        getCategory1SelectorList,
        getCategory2SelectorList,
        getCategory3SelectorList
    }
}